<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <title></title>
    <link rel="stylesheet" type="text/css" href="http://servicesbeta.esri.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" type="text/css" href="http://servicesbeta.esri.com/jsapi/arcgis/3.4/js/esri/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="css/layout.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

     <script type="text/javascript">
      var dojoConfig = {
        parseOnLoad: true,
    	packages:[
		  {name:"esriTemplate",location:location.pathname.replace(/\/[^/]+$/, '/')}
		]
      };
    </script>
    <script type="text/javascript" src="http://servicesbeta.esri.com/jsapi/arcgis/?v=3.4"></script>    
    <script type="text/javascript" src="./javascript/graphs/CountryGraph.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="./javascript/jquery/jquery-1.9.1.min.js"></script>    
    <script type="text/javascript" src="./javascript/jquery/jquery-ui-1.10.2.custom.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script type="text/javascript" src="javascript/layout.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
     <style>
#accordion-resizer {
padding: 10px;
width: 220px;
height: 500px;
}
</style>
    <script type="text/javascript">
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
      
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      var configOptions;
   
      function init(){
        configOptions = {        
        webmap : "fbd1d914b6d54168a1dc0455a5a170d2",                
        //Enter a title, if no title is specified, the webmap's title is used.
        title : "",
        //Enter a subtitle, if not specified the ArcGIS.com web map's summary is used
        subtitle : "",
		//Show Legend
		showLegend : true,
		//Choose the layer that will disappear under the swipe tool. All layers are given a value from 0 to number of layers available in your map
		chooseSwipeLevel : "1",
        //If the webmap uses Bing Maps data, you will need to provided your Bing Maps Key
        bingmapskey : "",
        //specify a proxy url if needed
        proxyurl:"",
        //specify the url to a geometry service
        geometryserviceurl:"http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer",
        //Modify this to point to your sharing service URL if you are using the portal
        sharingurl :"http://arcgis.com/sharing/content/items"
      };   
        initMap();
    }    
     
     $(document).ready(function(e){
         $( "#accordion" ).accordion({
            heightStyle: "fill"
            });      
     });
     
    dojo.addOnLoad(init);
    </script>
    <script type="text/javascript">
	  var iPad = false;
	  $(document).ready(function(e) {
		if(navigator.userAgent.match(/iPad/i) != null){
		  iPad = true;
		    $("#sliderdiv").css('width',12);
		  }
	  });
	</script>
  </head>

      <body class="tundra">
        <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"
        gutters="false" style="width:100%; height:100%;">

          <!-- Header Section-->
          <div id="header" dojotype="dijit.layout.ContentPane" region="top">
          	<div id="headerText">
              <div id="title"></div>
              <div id="subtitle"></div>
            </div>
            <div id="logoArea">
            </div>
        <div id="header_flourish"></div>

          </div>
          <div id="leftPane" class="leftPane" region="left" dojotype="dijit.layout.ContentPane" title="" role="group" widgetid="leftPane" style="left: 0px; top: 0px; position: absolute; height: 600px;">              
              <div id="accordion">
                  <h3>Graficas</h3>
                  <div style='width:250px; height:500px'>
                    <div id="chart_div" style='width:250px; height:250px'></div>
                    <div id="chart_div2" style='width:250px; height:250px'></div>                  
                  </div>
                  <h3>Analisis</h3>
                  <div> Proceso de analisis </div>
              </div>
          </div>
          <!-- Map Section -->
          <div id="map" dojotype="dijit.layout.ContentPane" region="center" dir="ltr">
          	<div class="moveable" title="Move the slider left or right" id="sliderdiv">
            </div>
            <div id="legendCon" dir="ltr">
              	<div id="legendToggle"><p id="legTogText"></p></div>
                <div id="legendDiv"></div>
            </div>
            <img id="swipeImg" src="images/swipeStart.png" alt="">
          </div>

          <!-- Footer Section-->
          <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom">
              <span>
                <select disabled="false" id='layerlistdd' onchange="updateSwipeLayer(this)"></select>
              </span>
          </div>

        </div>

        <!--Loading Panel-->
        <div id="loadingCon">
            <div id="loadingDialog">
         		<div id="loadingHeader"></div>
         		<div id="loading"></div>
        		<img id="loadingImg" alt="" src="images/progressBar.gif">
       		</div>
        </div>

    </body>

  </html>